<script setup lang='ts' name="org-add-user">
import type { FormInstance } from 'element-plus'

import { addOrganizationUser } from '@fl/api/iam-api'
import FlUpload from '@fl/components/fl-upload.vue'
import { ElButton, ElDialog, ElForm, ElFormItem, ElInput } from 'element-plus'
import { toRefs } from 'vue'

import { useRule } from './hooks/fjh-use-rule'

const props = defineProps<{
    data: any
    modelValue: boolean
}>()
const emits = defineEmits(['update:modelValue', 'confirm'])

const { data, modelValue } = toRefs(props)

const { userRules } = useRule()

let detail = reactive<any>({})
const state = {
    avatar: '', // 头像
    email: '', // 邮箱
    enterpriseAccount: '', // 登录名
    isfjh: '1',
    phonenumber: '', // 手机号
    status: '0', // 默认启用
    steward: '1', // 是否为房交会管理员
    userName: '', // 姓名
}
const form = ref<any>({ ...state })
const formRef = ref()

async function doSave(formEl: FormInstance | undefined) {
    if (!formEl)
        return
    await formEl.validate((valid, fields) => {
        if (valid) {
            const { enterpriseId, enterpriseObjectID } = detail
            addOrganizationUser({
                params: {
                    ...form.value,
                    enterpriseObjectID,
                    userId: enterpriseId,
                },

            }).then((res: any) => {
                if (res.code === 200) {
                    ElMessage.success('保存成功')
                    close(formEl)
                    emits('confirm')
                }
                else {
                    ElMessage.error(res.msg)
                }
            })
        }
        else {
            console.log('error submit!', fields)
        }
    })
}

function close(formEl: FormInstance | undefined) {
    formEl && formEl.resetFields()
    emits('update:modelValue', false)
}

watch(data, (val: any) => {
    console.log('row', val)
    detail = { ...val }
}, {
    deep: true,
    immediate: true,
})
</script>

<template>
    <ElDialog v-model="modelValue"
              width="800"
              :close-on-click-modal="false"
              title="新增"
              @close="close(formRef)"
    >
        <ElForm ref="formRef"
                :model="form"
                label-width="auto"
                :rules="userRules"
                label-position="top"
        >
            <ElFormItem label="头像"
                        prop="avatar"
            >
                <FlUpload v-model="form.avatar" />
            </ElFormItem>

            <ElRow :gutter="20">
                <ElCol :span="12">
                    <ElFormItem label="姓名"
                                prop="userName"
                    >
                        <ElInput v-model="form.userName" />
                    </ElFormItem>
                </ElCol>

                <ElCol :span="12">
                    <ElFormItem label="登录名"
                                prop="enterpriseAccount"
                    >
                        <ElInput v-model="form.enterpriseAccount" />
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow :gutter="20">
                <ElCol :span="12">
                    <ElFormItem label="手机号"
                                prop="phonenumber"
                    >
                        <ElInput v-model="form.phonenumber"
                                 maxlength="11"
                        />
                    </ElFormItem>
                </ElCol>

                <ElCol :span="12">
                    <ElFormItem label="邮箱"
                                prop="email"
                    >
                        <ElInput v-model="form.email" />
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElFormItem flex
                        flex-col
            >
                <div text-center
                     style="width:100%"
                >
                    <ElButton type="primary"
                              @click="doSave(formRef)"
                    >
                        确定
                    </ElButton>

                    <ElButton @click="close(formRef)">
                        取消
                    </ElButton>
                </div>
            </ElFormItem>
        </ElForm>
    </ElDialog>
</template>
